<template>
  <div
    class="box"
    id="pic"
    @click="change"
  ></div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import { defineProps, defineEmits, watch } from "vue";
import { sendImage } from "../../api/api.js";

const props = defineProps({
  PicInfo: String,
});
const emits = defineEmits( ["isLoading", "gettoken"] );
watch(
  () => props.PicInfo,
  (val) => {
    handleMessage(val);
  }
);
//接受到父组件传来的消息，调用sendImage
async function handleMessage(message) {
  try {
    emits("isLoading", true, "Loading...");
    
    let res = await sendImage(message);
    changeURL(res);

    emits("isLoading", false, "please input");
    emits("gettoken");
  } catch (error) {
    ElMessage.error("打咩！");
    emits("isLoading", false, "please input");
  }
}

function changeURL(URL) {
  let box = document.getElementById("pic");
  box.style.background = `url(${URL})`;
}
</script>

<style scoped>
.box {
  width: 512px;
  height: 512px;
  background: url(https://typora-1312299359.cos.ap-beijing-1.myqcloud.com/icon/bitLogo2.jpg)
    no-repeat center center;
  background-size: cover;
  border-radius: 10px;
  box-shadow: 1px 1px 10px 1px black;
}
@media screen and (max-width: 600px) {
  .box {
    width: 90vw;
    height: 90vw;
  }
}
</style>